<template>
  <div
    class="context-menu"
  >
    <ul>
      <li
        v-for="(item, index) in operations"
        :key="index">
               <Button  class="switchButton"  :class="{switchButton2:switchButton2==index}"  @click="menuItemClick(item.code,index)">
                         <!-- <Icon :type="item.icon" size="16" class="design-icon"/> -->
                          <span class="iconSpan" :class="item.icon"></span>
                          {{ item.name }}
                         </Button>   
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    operations: {
      type: Array,
      default: () => [
        {
          name: '合并',
          code: 'merge',
          icon:'marge'
        },
        {
          name: '拆分',
          code: 'split',
          icon:'split' 
        },
        {
          name: '删行',
          code: 'delRow',
             icon:'delRow' 
        },
        {
          name: '删列',
          code: 'delCol',
           icon:'delCol' 
        },
        {
          name: '添加行',
          code: 'addRow',
           icon:'addRow' 
        },
        {
          name: '添加列',
          code: 'addCol',
          icon:'addCol' 
        },
           {
          name: '行高',
          code: 'rowHeight',
          icon:'rowHeight'
        },   {
          name: '列宽',
          code: 'colWidth',
          icon:'colWidth'
        },
        {
          name: '清空选择',
          code: 'clearSelection'
        }
      ]
    },
    parentTableData: {
      type: Object,
      default: () => {}
    },
    contextPos: {
      type: Object,
      default: () => ({ l: 0, t: 0 })
    },
    selectedCells:{
       type: Array,
      default: () => []
    }
  },
  data(){
    return{
      switchButton2:null
    }
  },
  methods: {
    menuItemClick (cmd,index) {
      this.switchButton2=index
      this.$emit('menyItemCmd',cmd,this.selectedCells)
    }
  },
  mounted(){
  }
}
</script>
<style lang="less" scoped>
.context-menu{
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 12px;
  ul{
    width: 100%;
    height: 100%;
  }
  li{
    width: auto;
    height: 100%;
    float: left;
    list-style: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  
    a {
      padding: 5px 20px;
      display: block;
      color: #666;
      &.disabled{
        cursor: not-allowed;
      }
      &:hover:not(.disabled){
        background-color: #2dc3e8;
        color: #fff;
      }
    }
  }
}
.switchButton{
    border: none;
    outline: none;
    box-shadow: none;
    .iconSpan{
       display: inline-block;
       width: 16px;
       
       background-size: 100% 100%;
       height: 16px;
       position: relative;
       top: 4px;
    }
    .marge{
      background: url('../../../../assets/design/icon/marge (1).png') no-repeat;
    }
    .split{
      background: url('../../../../assets/design/icon/split-col (1).png') no-repeat;
    }
    .delRow{
           background: url('../../../../assets/design/icon/del-line (1).png') no-repeat;
    }
    .delCol{
           background: url('../../../../assets/design/icon/del-col (1).png') no-repeat;
    }
    .addRow{
           background: url('../../../../assets/design/icon/add-line (1).png') no-repeat;
    }
    .addCol{
           background: url('../../../../assets/design/icon/add-col (1).png') no-repeat;
    }
    .rowHeight{
           background: url('../../../../assets/design/icon/line-height (1).png') no-repeat;
    }
    .colWidth{
           background: url('../../../../assets/design/icon/col-width (1).png') no-repeat;
    }
}
.switchButton2{
    background:#2d8cf0  ;
   color: #ffffff;
    .marge{
              background: url('../../../../assets/design/icon/marge (2).png') no-repeat;
    }
    .split{
      background: url('../../../../assets/design/icon/split-col (2).png') no-repeat;
    }
    .delRow{
           background: url('../../../../assets/design/icon/del-line (2).png') no-repeat;
    }
    .delCol{
           background: url('../../../../assets/design/icon/del-col (2).png') no-repeat;
    }
    .addRow{
           background: url('../../../../assets/design/icon/add-line (2).png') no-repeat;
    }
    .addCol{
           background: url('../../../../assets/design/icon/add-col (3).png') no-repeat;
    }
    .rowHeight{
           background: url('../../../../assets/design/icon/line-height (2).png') no-repeat;
    }
    .colWidth{
           background: url('../../../../assets/design/icon/col-width (2).png') no-repeat;
    }
}
</style>
